import echarts from 'echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import storageApi from '../../core/storage/storage';

@Inject('$log', '$rootScope', 'staffProfileService')
class staffProfileController {
    /*eslint-disable */
    constructor() {
      this.querySelfStaffInOut();
      this.getProjectTeamStatistics();
      this.getStaffClassifyStatistics();
      this.getConstructionTeamStatistics();
      this.getPostStatistics();
    }

    // 人员进出场
    querySelfStaffInOut() {
      this.staffProfileService.querySelfStaffInOut({orgId: this.$rootScope.orgId || storageApi.get('orgId')})
      .then((res) => {
        if (res.success) {
          if(res.rows && res.rows.length > 0) {
            this.hasData1 = true;
            this.initChart1(res.rows);
          }
        }
      });
    }

    // 项目部与班组人员统计（人员概况）
    getProjectTeamStatistics() {
      this.staffProfileService.getProjectTeamStatistics({orgId: this.$rootScope.orgId || storageApi.get('orgId')})
      .then((res) => {
        if (res.success) {
          if(res.data && res.data.length > 0) {
            this.hasData2 = true;
            this.initChart2(res.data);
          }
        }
      });
    }

    // 人员分类统计（人员概况）
    getStaffClassifyStatistics() {
      this.staffProfileService.getStaffClassifyStatistics({orgId: this.$rootScope.orgId || storageApi.get('orgId')})
      .then((res) => {
        if (res.success) {
          if(res.data && res.data.length > 0) {
            this.hasData3 = true;
            this.initChart3(res.data);
          }
        }
      });
    }

    // 施工队人员统计（人员概况）
    getConstructionTeamStatistics() {
      this.staffProfileService.getConstructionTeamStatistics({orgId: this.$rootScope.orgId || storageApi.get('orgId')})
      .then((res) => {
        if (res.success) {
          if(res.data && res.data.length > 0) {
            this.hasData4 = true;
            this.initChart4(res.data);
          }
        }
      });
    }

    // 岗位统计（人员概况）
    getPostStatistics() {
      this.staffProfileService.getPostStatistics({orgId: this.$rootScope.orgId || storageApi.get('orgId')})
      .then((res) => {
        if (res.success) {
          if(res.data && res.data.length > 0) {
            this.hasData5 = true;
            this.initChart5(res.data);
          }
        }
      });
    }

    initChart1(data) {
      var enterNums = data.map(item => item.enterNum);
      var leaveNums = data.map(item => item.leaveNum);
      var inNums = data.map(item => item.inNum);
      var colors = ['#59b0e7', '#76c585', '#c4c4c4'];
      var option1 = {
          tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          legend: {
              data: ['本月进场人数', '本月离场人数', '本月在线人数']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          yAxis: {
              type: 'value'
          },
          xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          series: [{
                  name: '本月进场人数',
                  type: 'bar',
                  barMaxWidth: '20',
                  stack: '人数',
                  itemStyle: {
                      normal: {
                          color: colors[0],
                      }
                  },
                  label: {
                      normal: {
                          show: true,
                          position: 'top',
                          textStyle: {
                              color: colors[0],
                          }
                      }
                  },
                  data: enterNums
              }, {
                  name: '本月离场人数',
                  type: 'bar',
                  stack: '人数',
                  itemStyle: {
                      normal: {
                          color: colors[1],
                      }
                  },
                  label: {
                      normal: {
                          show: true,
                          position: 'bottom',
                          textStyle: {
                              color: colors[1],
                          }
                      }
                  },
                  data: leaveNums
              }, {
                  name: '本月在线人数',
                  type: 'line',
                  stack: '人数',
                  label: {
                      normal: {
                          show: true,
                          position: 'insideRight',
                          textStyle: {
                              color: colors[2],
                          }
                      }
                  },
                  itemStyle: {
                      normal: {
                          color: colors[2],
                      }
                  },
                  data: inNums
              },

          ]
      };
      const myChart1 = echarts.init(document.getElementById('staff-in-out-chart'));
      myChart1.setOption(option1);
      setTimeout(() => {
        myChart1.resize();
      }, 50);
    }

    initChart2(data) {
      var names = data.map(item => item.name);
      var newData = data.map((item) => {
        return {
          name: item.name,
          value: item.num,
        }
      });
      const option = {
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
              x: 'center',
              data: names
          },
          series: [{
              name: '人员数量',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                  normal: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      show: true,
                      textStyle: {
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  }
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data: newData,
          }]
      };
      const myChart2 = echarts.init(document.getElementById('project-department-staff-chart'));
      myChart2.setOption(option);
      setTimeout(() => {
        myChart2.resize();
      }, 50);
    }

    initChart3(data) {
      var names = data.map(item => item.name);
      var newData = data.map((item) => {
        return {
          name: item.name,
          value: item.num,
        }
      });
      const option = {
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
              x: 'center',
              data: names,
          },
          series: [{
              name: '分类数量',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                  normal: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      show: true,
                      textStyle: {
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  }
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data: newData,
          }]
      };
      const myChart3 = echarts.init(document.getElementById('staff-classify-chart'));
      myChart3.setOption(option);
      setTimeout(() => {
        myChart3.resize();
      }, 50);
    }

    initChart4(data) {
      var names = data.map(item => item.name);
      var maleNums = data.map(item => item.maleNum);
       var femaleNums = data.map(item => item.femaleNum);
      var colors = ['#59b0e7', '#76c585'];
      var option = {
          legend: {
              data: ['男', '女']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          yAxis: {
              type: 'value'
          },
          xAxis: {
              type: 'category',
              data: names
          },
          series: [{
              name: '男',
              type: 'bar',
              barMaxWidth: '20',
              stack: '人数',
              itemStyle: {
                  normal: {
                      color: colors[0],
                  }
              },
              label: {
                  normal: {
                      show: true,
                      position: 'top',
                      textStyle: {
                          color: colors[0],
                      }
                  }
              },
              data: maleNums
          }, {
              name: '女',
              type: 'bar',
              stack: '人数',
              itemStyle: {
                  normal: {
                      color: colors[1],
                  }
              },
              label: {
                  normal: {
                      show: true,
                      position: 'top',
                      textStyle: {
                          color: colors[1],
                      }
                  }
              },
              data: femaleNums
          }]
      };
      const myChart4 = echarts.init(document.getElementById('construction-staff-chart'));
      myChart4.setOption(option);
      setTimeout(() => {
        myChart4.resize();
      }, 50);
    }

    initChart5(data) {
      var names = data.map(item => item.name);
      var nums = data.map(item => item.num);
      var colors = ['#59b0e7', '#76c585'];
      var option = {
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          yAxis: {
              type: 'value'
          },
          xAxis: {
              type: 'category',
              data: names,
          },
          series: [{
              name: '人数',
              type: 'bar',
              barMaxWidth: '20',
              stack: '人数',
              itemStyle: {
                  normal: {
                      color: colors[0],
                  }
              },
              label: {
                  normal: {
                      show: true,
                      position: 'top',
                      textStyle: {
                          color: colors[0],
                      }
                  }
              },
              data: nums
          }]
      };
      const myChart5 = echarts.init(document.getElementById('construction-post-chart'));
      myChart5.setOption(option);
      setTimeout(() => {
        myChart5.resize();
      }, 50);
    }

}

export default staffProfileController;
